<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧校园</title>
    <style>
        table{
            border-collapse: collapse;
            margin: 20px auto;
        }
        table th,table td{
            width: 100px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
        }
        span:hover{
            cursor: pointer;
        }
        p{
            width: 50px;
            height: 20px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 20px;
        }
        p:hover{
            cursor: pointer;
        }
    </style>
    <script src="./jquery-3.5.0/jquery-3.5.0.js"></script>
    <script>
        $(function(){
            var baseUrl='http://123.57.30.43:7788';
            var obj={
                'password':'123321',
                'username':'admin1',
            };
            //1.获取token
            $.ajax({
                type:'POST',
                url:baseUrl+'/user/login',
                contentType:'application/json;charset=utf-8',
                data:JSON.stringify(obj),
                success:function(data){
                    // console.log(data);
                    var token=data.data.token;
                    sessionStorage.setItem('token',token);
                }
            });  
            //2.请求所有用户信息
            var token=sessionStorage.getItem('token');
             // console.log(token);
            function getUsers(){
                $.ajax({
                url:baseUrl+'/baseUser/findAll',
                type:'GET',
                headers:{
                    'Authorization':token
                },
                success:function(data){
                    // console.log(data);
                    var users=data.data;
                    users.forEach(function(item){
                        var tr=$(`
                            <tr>
                                <td>`+item.id+`</td>
                                <td>`+item.username+`</td>
                                <td>`+item.realname+`</td>
                                <td>`+item.politicsStatus+`</td>
                                <td>`+item.gender+`</td>
                                <td>`+item.status+`</td>
                                <td>`+item.telephone+`</td>
                                <td>
                                    <span>删除</span>
                                </td>
                            </tr>
                        `);
                        $('tbody').append(tr);
                    });
                }
            });
            };
            getUsers();
            //3.根据id删除用户信息
            $('tbody').on('click','span',function(){
                //获取当前行id
                var id=$(this).parents('tr').children().eq(0).text();
                // console.log(id);
                //发送删除请求
                $.ajax({
                    type:'GET',
                    url:baseUrl+'/baseUser/deleteById?id='+id,
                    headers:{
                        'Authorization':token
                    },
                    success:function(data){
                        if(data.status==200){
                            alert(data.message);
                            //删除所有tr标签
                            $('tbody').empty();
                            //刷新页面
                            getUsers();
                        }
                    }
                })
            });
            //搜索
            //1.获取用户输入信息
            var input=$('input').val();
            $.ajax({
                type:'GET',
                url:baseUrl+'/article/findById?id='+input,
                contentType:'application/json;charset=utf-8',
                data:JSON.stringify(input),
                headers:{
                    'Authorization':token
                },
                success:function(data){
                    console.log(data);
                }
            });
        });
    </script>
</head>
<body>
    <input type="text">
    <p>搜索</p>
    <table>
        <thead>
            <th>序号</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>角色</th>
            <th>性别</th>
            <th>状态</th>
            <th>手机号</th>
            <th>操作</th>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>